<template>
  <div id="checkSearch">
    <el-card class="box-card" style="margin:15px 15px 0px 15px;">
      <el-form
        ref="basicForm"
        :inline="true"
        :rules="basicDataRules"
        :model="basicData.model"
        class="demo-form-inline"
        label-width="120px"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="条形码号:" prop="barCode" label-width="73px">
              <el-input size="mini" v-model="basicData.model.barCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="递送日期:" prop="deliveryDate">
              <el-date-picker
                size="mini"
                v-model="basicData.model.deliveryDate"
                style="width:100%"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="递送批号:" prop="deliveryId" label-width="73px">
              <el-input size="mini" v-model="basicData.model.deliveryId" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="验收人员:" prop="deliveryMan">
              <el-input size="mini" v-model="basicData.model.deliveryMan" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="buttom">
        <el-button type="primary" size="small" style="width:100px" @click="onSubmit('query')">查询</el-button>
        <el-button size="small" @click="onSubmit('reset')">清空</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:5px 15px;padding:0">
      <!-- 表格 -->
      <TableTrees
        :loading="loading"
        id="printMe"
        ref="tabTree"
        :table-data="tableData"
        :table-title="tableTitle"
        :checkShow="false"
        :props="props"
        @tabSelectChange="tabSelectChange"
      />
    </el-card>
    <!-- 打印弹窗 -->
    <el-dialog :visible.sync="dialogShow" width="40%">
      <span slot="title" class="dialog-title" style="font-size: 18px;font-weight: bold;">采血卡打印</span>
      <div>内容</div>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="clickTruePrint"
        >打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableTrees from "@/components/table-tree/index1";
import DeliveryExpApi from "@/api/DeliveryExp.js";

export default {
  components: { TableTrees },
  data() {
    return {
      // 转菊花
      loading: false,
      // 配置选项
      props: {
        label: "id", // 需要指定的节点渲染对象属性
        children: "list" // 指定的子级
      },
      // 页条数
      pageSize: 10,
      // 页数
      pageIndex: 1,
      // 打印对话框
      dialogShow: false,
      // 是否显示更多查询
      morderShow: true,
      // 表数据
      tableData: [],
      tableTitle: [
        {
          prop: "momName",
          label: "母亲姓名"
        },
        {
          prop: "birthTime",
          label: "出生日期"
        },
        {
          prop: "barCode",
          label: "条形码号"
        },
        {
          prop: "experimentKeywords.data",
          label: "实验项目"
        },
        {
          prop: "babySex.data",
          label: "性别"
        },
        {
          prop: "bloodTime",
          label: "采血日期"
        },
        {
          prop: "receiveTime",
          label: "验收日期"
        },
        {
          prop: "deliveryId",
          label: "批号"
        },
        {
          prop: "deliveryDepart",
          label: "递送机构"
        },
        {
          prop: "deliveryTime",
          label: "递送日期"
        },
        {
          prop: "deliveryMan",
          label: "递送人员"
        }
      ],
      // 基本数据
      basicData: {
        current: 1,
        map: {},
        model: {
          areaId: {
            data: {
              abbreviation: "",
              createTime: "",
              createUser: 0,
              describe: "",
              id: 0,
              label: "",
              parentId: 0,
              sortValue: 0,
              status: true,
              treePath: "",
              type: {
                data: "",
                key: ""
              },
              updateTime: "",
              updateUser: 0
            },
            key: ""
          },
          barCode: "",
          courierStatus: {
            data: "",
            key: ""
          },
          deliveryId: "",
          deliveryTime: {
            end: "",
            start: ""
          },
          departId: {
            data: {
              abbreviation: "",
              createTime: "",
              createUser: 0,
              describe: "",
              id: 0,
              label: "",
              parentId: 0,
              sortValue: 0,
              status: true,
              treePath: "",
              type: {
                data: "",
                key: ""
              },
              updateTime: "",
              updateUser: 0
            },
            key: ""
          },
          hospitalId: {
            data: {
              abbreviation: "",
              createTime: "",
              createUser: 0,
              describe: "",
              id: 0,
              label: "",
              parentId: 0,
              sortValue: 0,
              status: true,
              treePath: "",
              type: {
                data: "",
                key: ""
              },
              updateTime: "",
              updateUser: 0
            },
            key: ""
          },
          momName: "",
          receiveMan: "",
          receiveTime: {
            end: "",
            start: ""
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 校验
      basicDataRules: {
        codeNumber: [{ message: "请输入递送批号", trigger: "change" }],
        barCode: [{ message: "请输入条形码号", trigger: "change" }],
        countyAndCitiesId: [{ message: "请选择所属区县", trigger: "change" }],
        hospitalId: [{ message: "请选择所属医院", trigger: "change" }],
        deptId: [{ message: "请选择所属部门", trigger: "change" }]
      },
      // 全选数据
      selectList: []
    };
  },
  mounted() {
    this.getList(this.basicData);
  },
  methods: {
    getList(data) {
      // printDeliveryOrder
      DeliveryExpApi.checkSearch.page(data).then(res => {
        res.data.data.records.forEach(item =>{
          item.children = item.list
        });
        this.tableData = res.data.data.records
        this.tableData.forEach((item, index) => {
          item.areaId = index.toString();
          item.momName = `${item.number} ( 月份：${item.month} )`;
          item.children.forEach((i,n) =>{
            i.areaId = n+item.areaId
          })
        });
      });
    },
    // 全选
    tabSelectChange(v) {
      this.selectList = v;
    },
    // 点击展示与收起
    onMoreStatus() {
      this.morderShow = !this.morderShow;
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.pageSize = val;
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.pageIndex = currentPage;
    },
    // 查询、清空按钮
    onSubmit(type) {
      if (type == "query") {
        this.getList(this.basicData);
      } else {
        this.$refs["basicForm"].resetFields();
      }
    },
    // 点击打印
    clickTruePrint() {
      this.handlePrintPrint();
    },
    // 打印事件
    handlePrintPrint() {
      if (this.upLoading) {
        this.$message({
          message: "数据加载中,请稍后...",
          type: "warning"
        });
      } else {
        this.CreateTablePage("print", "采血卡打印", "sampleManage");
      }
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#checkSearch {
  .buttom {
    width: 100%;
    .flex;
  }
  .mores {
    .flex;
    justify-content: flex-start;
    .more-title {
      font-size: 12px;
      font-family: SourceHanSansSC;
      font-weight: 400;
      color: rgb(153, 153, 153);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
    }
  }
}
</style>
